<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>mydemo</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        #outer {
            width: 300px;
            margin: 0 auto;
            text-align: center;
        }
        
        #outer input {
            margin-bottom: 10px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: #000;
            color: white;
            font: 12px/1.5 Atoma;
            text-indent: 2em;
        }
    </style>
    <script type="text/javascript">
        /* 实现的只是html中的value变化，js获取和调用失败 */
        var change = function(z1, x1, y1) {
            z1.style[x1] = y1
        };
        window.onload = function() {
            /* 获取输入框中的值 */
            var oInput = document.getElementsByTagName("input");
            var oBox = document.getElementById("box");
            /*按键功能*/
            oInput[2].onclick = function() {
                var x = oInput[0].value;
                var y = oInput[1].value;
                change(oBox, x, y);
            };
            oInput[3].onclick = function() {
                oBox.removeAttribute("style");
            };
        };
    </script>
</head>

<body>
    <div id="outer">
        <label for="i1">属性名：</label><input type="text" id="i1" value="background"><br>
        <label for="i2">属性值：</label><input type="text" id="i2" value="green"><br>
        <input type="button" value="确定">
        <input type="button" value="重置">
        <div id="box">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
    </div>
</body>

</html>